<template>
  <div class="companys-container">
    <div class="app-container">
      <el-card shadow="never">
      <div>胡媛媛</div>
        <!-- 搜索 -->
        <el-form :model="requestParameters" ref="requestParameters" label-width="80px" size="small">
          <el-row>
            <el-col :span="6">
              <el-form-item label="标签名称" prop="tags">
                <el-input
                  placeholder="请输入"
                  v-model="requestParameters.tags"
                  @keyup.enter="handleFilter"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" prop="province">
                <el-select
                  v-model="requestParameters.province"
                  @keyup.enter="handleFilter"
                  @change="handleProvince"
                  filterable
                  style="width:100%"
                >
                  <el-option
                    v-for="item in citySelect.province"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="地区" prop="city">
                <el-select
                  v-model="requestParameters.city"
                  @keyup.enter="handleFilter"
                  filterable
                  style="width:100%"
                >
                  <el-option
                    v-for="item in citySelect.cityDate"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="requestParameters.shortName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="状态" prop="state">
                <el-select
                  v-model="requestParameters.state"
                  @keyup.enter="handleFilter"
                  style="width:100%"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button @click="clear">清除</el-button>
                <el-button type="primary" @click="handleFilter">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item style="text-align:right">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="handleChange('add')"
                >新增用户</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据记录 -->
        <el-alert :title="`共 ${total} 条记录`" :closable="false" show-icon ></el-alert>
        <!-- 数据列表 -->
        <el-table
          :data="companysList"
          v-loading="listLoading"
          highlight-current-row
          style="width: 100%"
          element-loading-text="网啊~带带我吧~~"
        >
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column label="企业编号" prop="number"></el-table-column>
          <el-table-column label="企业简称" prop="shortName"></el-table-column>
          <el-table-column label="标签" prop="tags"></el-table-column>
          <el-table-column label="创建者" prop="creatorID"></el-table-column>
          <el-table-column label="创建日期">
            <template v-slot="{row}">
              {{ row.addDate | parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remarks"></el-table-column>
          <el-table-column label="状态">
            <template v-slot="{row}">
              {{ status.find(item => item.value===row.state).label }}
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column label="操作" width="180">
            <template v-slot="{row}">
              <el-button type="primary" icon="el-icon-edit" plain circle @click="handleChange(row.id)"></el-button>
              <el-button
                :type="row.state===1 ?'warning' :'success'"
                :icon="row.state===1 ?'el-icon-close' :'el-icon-check'"
                plain circle
                @click="handleStatus(row)"
              ></el-button>
              <el-button type="danger" icon="el-icon-delete" plain circle @click="removeUser(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requestParameters.page"
            :page-sizes="[10,20,30, 50]"
            :page-size="requestParameters.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="total">
          </el-pagination>
        </el-row>
        <!-- end -->
        <!-- 新增标签弹层 -->
        <CompanysAdd ref="editUser" :titleInfo="titleInfo" :formBase="formData" v-on:newDataes="loadGetList"/>
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, remove, detail, disabled } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys.js'
import CompanysAdd from './../components/companys-add'
export default {
  name: 'Companys',
  components: {
    CompanysAdd
  },
  data () {
    return {
      companysList: [],
      total: 0,
      listLoading: true,
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      titleInfo: {
        pageTitle: '用户', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        isFamous: false,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      data: {},
      states: ''
    }
  },
  created () {
    this.loadGetList()
    const _this = this
    this.getCityData()
    // 键盘enter操作
    document.onkeydown = () => {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter()
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    // 获取列表数据
    async loadGetList () {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      // 获取数据赋值给 companysList
      this.companysList = res.items
      // 获取总条数
      this.total = res.counts
      this.listLoading = false
    },
    // 清除
    clear () {
      this.requestParameters = {}
      this.loadGetList()
    },
    // 搜索
    handleFilter () {
      this.requestParameters.page = 1
      this.loadGetList()
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      this.loadGetList()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.loadGetList()
    },

    // 新增用户、编辑用户
    handleChange (id) {
      this.formData = {
        isFamous: true,
        shortName: '',
        company: '',
        province: '',
        city: '',
        tags: '',
        remarks: ''
      }
      this.$refs.editUser.dialogFormV()
      if (id === 'add') {
        this.titleInfo.text = '创建' // 给弹层传参
      } else {
        this.titleInfo.text = '编辑' // 给弹层传参
        this.hanldeEditForm(id)
      }
    },

    // 编辑  表单详情数据加载
    async hanldeEditForm (editId) {
      this.formData.id = editId
      const { data: res } = await detail({ id: editId })
      // 获取详情 给formData
      this.formData = res
    },
    // 删除
    removeUser (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        this.loadGetList()
      }).catch(() => { this.$message.error('取消删除') })
    },
    // 启用、禁用
    async handleStatus (row) {
      if (row.state) {
        this.states = '禁用'
      } else {
        this.states = '启用'
      }
      this.data = {
        id: row.id,
        state: row.state ? 0 : 1
      }
      this.$confirm('是否确定' + this.states + '?', '提示', {
        type: 'warning'
      }).then(async () => {
        await disabled(this.data)
        this.$message.success('已成功' + this.states)
        this.loadGetList()
      }).catch(() => {
        this.$message.info('取消更改')
      })
    },
    // 获取省
    getCityData () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    }
  }
}
</script>

<style scoped lang='less'>
.el-card{
  .el-alert{
    margin-bottom: 20px;
  }
  /deep/.el-table .cell{
    text-align: center !important;
  }
  .el-pagination{
    margin-top: 20px;
  }
}
</style>
